<template>
  <div></div>
</template>

<script setup>

import { inject,onMounted,onUnmounted,ref } from 'vue'
import {getWuhanBridge} from '@/assets/api/index'
import { LineLayer,Popup } from '@antv/l7';
  const mapScene = inject('mapScene')
  const popup = ref(null) // 使用ref来引用Popup实例
  let lineLayer
  onMounted( async () => {
    mapScene.value.map.flyTo({
      center: [114.24, 30.51],
      zoom: 12,
      pitch: 60,
      bearing: -20
    })
    const {data}= await getWuhanBridge()
    lineLayer = new LineLayer({})
    lineLayer.source(data).shape('arc3d')
    .style({
      thetaOffset: 1,
    })
    .size(10)
    .color('name', ['yellow', 'red', 'blue', 'green'])
    .active(true);
        mapScene.value.scene.addLayer(lineLayer)
        popup.value = new Popup({
          closeButton: true,
    closeOnClick: false,
    offset: [0, -20]
        })
        lineLayer.on('click', (e) => {
          console.log(e)


    // 设置Popup内容
    popup.value
      .setLngLat(e.lngLat)
      .setHTML(`
        <div style="padding: 10px;">
          <h3 style="margin-bottom: 5px;">桥梁信息</h3>
          <p>名称: ${e.feature.properties.name || '未知'}</p>
          <p>简介: ${e.feature.properties.info || '未知'}</p>
        </div>
      `)
         // 显示Popup
         mapScene.value.scene.addPopup(popup.value)
  })


  })
  onUnmounted(() => {
    if (lineLayer) {
      mapScene.value.scene.removeLayer(lineLayer)
    }
    if (popup.value) {
      mapScene.value.scene.removePopup(popup.value)
    }
  })
</script>

<style scoped>
</style>
